<template>
  <div class="px-[16px] py-[16px] mt-[8px] bg-[var(--base-color)] rounded-[8px]">
    <FormTitle title="合同信息" />
    <el-descriptions :column="4">
      <el-descriptions-item label="合同号码:">{{
        formData?.contract_number || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="日期:">{{
        formData?.contract_date || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="签约地点:">{{
        formData?.signing_place || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="包装及唛头:">{{
        formData?.package_marking || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="装运期:">{{
        formData?.ship_period || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="付款条件:">{{
        formData?.payment_terms || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="装运标记:">{{
        formData?.ship_marking || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="合同价值:"
        >{{ formData?.pre_total_amount || "-" }}
        {{ formData?.pre_currency || "CNY" }}</el-descriptions-item
      >
      <el-descriptions-item label="卖方:">{{
        formData?.seller_name || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="卖方电话:">{{
        formData?.seller_phone || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="卖方传真:">{{
        formData?.seller_fax || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="卖方地址:">{{
        formData?.seller_address || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="买方:">{{
        formData?.buyer_name || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="买方电话:">{{
        formData?.buyer_phone || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="买方传真:">{{
        formData?.buyer_fax || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="买方地址:">{{
        formData?.buyer_address || "-"
      }}</el-descriptions-item>
    </el-descriptions>
    <vxe-grid v-bind="tableOptions" max-height="300px" />
  </div>
</template>

<script setup>
import FormTitle from "@/components/Form/FormTitle.vue";
const props = defineProps({
  data: { type: Object, default: () => {} },
});
const formData = ref({});
const rules = reactive({});
const tableOptions = reactive({
  round: true,
  columnConfig: {
    resizable: true,
  },
  data: [],
  columns: [
    {
      title: "序号",
      width: 50,
      field: "xno",
    },
    {
      title: "货物名称",
      minWidth: 150,
      field: "goods_name",
    },
    {
      title: "规格",
      width: 180,
      field: "specification",
      cellRender: { name: "arrMap" },
    },
    {
      title: "数量",
      width: 180,
      field: "goods_nums",
    },
    {
      title: "单位",
      width: 160,
      field: "goods_unit",
    },
    // {
    //   title: "单价/CNY",
    //   width: 160,
    //   field: "goods_price_cny",
    // },
    // {
    //   title: "金额/CNY",
    //   width: 160,
    //   field: "goods_amount_cny",
    // },
    {
      title: "单价/总价/币制",
      minWidth: 180,
      field: "quarantine_add_code",
      slots: {
        // default:({row}) =>  `${row.goods_price||'-'}/${row.total_amount||'-'}/${row.currency||'-'}`,
        default: ({ row }) =>
          `${row.pre_price}/${row.pre_total_amount}/${row.pre_currency || "-"}`,
      },
    },
  ],
});

watch(
  () => props.data,
  (val) => {
    if (val) {
      tableOptions.data = val?.details || [];
      formData.value = val;
    }
  }
);
</script>

<style lang="scss" scoped>
:deep(.el-descriptions__label) {
  display: inline-block;
  width: 80px;
  text-align: right;
  color: var(--base-sub-text-color);
}
:deep(.el-descriptions__content) {
  color: var(--base-text-color);
}
</style>
